<template>
  <div>
    <FromTitle title="配置" />
    <!-- <el-radio-group class="mb-[8px]" v-model="radio1"> -->
      <!-- <el-radio-button label="0">API轨迹配置</el-radio-button> -->
      <!-- <el-radio-button label="1">爬取轨迹配置</el-radio-button> -->
    <!-- </el-radio-group> -->
    <el-form
      ref="formRef"
      :model="dynamicValidateForm"
      label-width="120px"
      label-position="top"
      class="demo-dynamic"
      :inline="true"
    >
      <div
        class="flex item-center"
        v-for="(domain, index) in dynamicValidateForm.details"
        :key="domain.key || domain.id"
      >
        <el-form-item
          label="公司货态"
          :prop="'details.' + index + '.sys_status'"
          :rules="[
            {
              required: true,
              message: '请选择公司货态',
              trigger: 'blur',
            },
          ]"
        >
          <el-select filterable v-model="domain.sys_status">
            <el-option
              v-for="item in optionsData['sys_status']"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="渠道商货态"
          :prop="'details.' + index + '.api_status'"
          :rules="[
            {
              required: true,
              message: '请选择渠道商货态',
              trigger: 'blur',
            },
          ]"
        >
          <el-select filterable v-model="domain.api_status">
            <el-option
              v-for="item in apiCargoStatus"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用" :prop="'details.' + index + '.status'">
          <el-select filterable v-model="domain.status">
            <el-option :key="1" :value="1" label="启用"></el-option>
            <el-option :key="0" :value="0" label="禁用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="时间规划定义"
          :prop="'details.' + index + '.time_type'"
        >
          <el-select filterable v-model="domain.time_type">
            <el-option
              v-for="item in optionsData['time_type']"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="flex items-center mt-[10px]">
          <el-button @click="addDomain">+</el-button>
          <el-button
            @click.prevent="removeDomain(domain)"
            v-if="dynamicValidateForm.details.length > 1"
          >
            -
          </el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script lang="jsx" setup>
import FromTitle from '@/components/Form/FormTitle.vue'
import { overallOptions } from '@/api/public'
import { strHump } from '@/utils/index'

const props = defineProps({
  apiCargoStatus: { type: Array, default: () => [] },
  data: { type: Array, default: () => [] },
})

const formRef = ref()
let dynamicValidateForm = reactive({
  details: [{ status: 1 }],
})

const radio1 = ref('0')

const optionsData = ref({})

onMounted(() => {
  getOption()
})

watch(
  () => props.data,
  val => {
    dynamicValidateForm.details = val
  }
)

const getOption = async () => {
  const _name = 'base.cargo-status'
  const { data } = await overallOptions({
    params: [_name],
  })
  const humpName = strHump(_name)
  if (data[humpName]) {
    optionsData.value = data[humpName]
  }
}

const removeDomain = item => {
  const index = dynamicValidateForm.details.indexOf(item)
  if (index !== -1) {
    dynamicValidateForm.details.splice(index, 1)
  }
}
const addDomain = () => {
  dynamicValidateForm.details.push({
    key: Date.now(),
    status: 1,
  })
}

const submitForm = () => {
  const formEl = formRef.value
  if (!formEl) return
  return new Promise((resolve, reject) => {
    formEl.validate(valid => {
      if (valid) {
        resolve(dynamicValidateForm)
      } else {
        reject(false)
        return false
      }
    })
  })
}

const resetForm = () => {
  const formEl = formRef.value
  if (!formEl) return
  formEl.resetFields()
  dynamicValidateForm.details = [{ status: 1 }]
}

defineExpose({ formRef, submitForm, resetForm })
</script>
